<template>
	<div class="public-comments">
		<div class="not-comments" v-show='showNotCts'>
			<p>
				还没有评论，赶快来抢沙发
			</p>
		</div>
		<div 
			v-show='showCts'
			v-for='(item, index) of commentsList'
			:key='index'
			class="detail-comments" 
			:class="{ detail_list_comments: CommentsAct == item.comments_content }"
			@touchstart='commentsTouchstart(item.comments_content)'
			@touchend='commentsTouchend()'
		>
			<div class="comments-top">
				<div class="comments-l">
					<img class="comments-l-icon" :src="item.comments_avatar" />
				</div>
				<div class="comments-c">
					<p class="comments-c-username">
						{{item.comments_user}}
					</p>
					<p class="comments-c-userinfo">
						{{item.comments_tag}}
					</p>
				</div>
				<div class="comments-r">
					<span class="iconfont point">
						&#xe739;
					</span>
				</div>
			</div>
			<div class="comments-content">
				<p class="comments-txt">
					{{item.comments_content}}
				</p>
				<p class="comments-time">
					发表于 {{item.comments_time}}
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'video-detail-comments',
		props: {
			showCts: Boolean,
			showNotCts: Boolean,
			commentsList: Array
		},
		data () {
			return {
				CommentsAct: ''
			}
		},
		
		methods: {
			commentsTouchstart (comments_xb) {
				this.CommentsAct = comments_xb
			},
			commentsTouchend () {
				this.CommentsAct = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/minxins.styl'
	.public-comments
		background:#fff
		padding-bottom:104px
		.not-comments
			padding:90px 0
			background:#fff
			text-align:center
			margin-bottom:106px
		.not-comments p
			font-size:30px
			color:#999
		.detail-comments
			padding:42px 16px 34px 16px
		.comments-top
			display:flex
			flex-direction:row
			padding:0 12px
			.comments-l
				width:78px
				height:78px
				background:#ccc
				border-radius:50%
				overflow:hidden
				.comments-l-icon
					width:100%
			.comments-c
				width:81%
				height:78px	
				.comments-c-username
					font-size:31px
					color:#308ee3
					margin-top:6px
					margin-left:18px
					textSingle()
				.comments-c-userinfo
					font-size:24px
					color:#aaa
					margin-top:18px
					margin-left:18px
					textSingle()
			.comments-r
				width:8%
				height:78px
				display:flex
				align-items:center
				justify-content:center
				.point
					font-size:40px
					margin-top:-2px
					color:#F5B53A
				.point-num
					margin-left:4px
					font-size:26px
		.comments-content
			padding:28px 30px 0 106px
			font-size:32px
			line-height:46px
			-webkit-line-clamp: 6
			textClamp()
			.comments-txt
				letter-spacing:1px
				line-height:56px
			.comments-time
				margin-top:26px
				font-size:26px
		.detail_list_comments
			background-color:#F1F1F1
</style>
